{extend name="layout/layout"}
{block name="content"}
<style>
	.pagination {
	    display: inline-block;
	    padding-left: 0;
	    margin: 20px 0;
	    border-radius: 4px;
	}
	.pagination > li {
	    display: inline;
	}
	.pagination  > a,
	.pagination  > span {
	    position: relative;
	    float: left;
	    padding: 6px 12px;
	    margin-left: -1px;
	    line-height: 1.42857143;
	    color: #F97A28;
	    text-decoration: none;
	    background-color: #fff;
	    /* border: 1px solid #ddd; */
	}
	.pagination > li:first-child > a,
	.pagination > li:first-child > span {
	    margin-left: 0;
	    border-top-left-radius: 4px;
	    border-bottom-left-radius: 4px;
	}
	.pagination > li:last-child > a,
	.pagination > li:last-child > span {
	    border-top-right-radius: 4px;
	    border-bottom-right-radius: 4px;
	}
	.pagination  > a:hover,
	.pagination  > span:hover,
	.pagination  > a:focus,
	.pagination  > span:focus {
	    z-index: 2;
	    color: #F97A28;
	    background-color: #eee;
	    border-color: #ddd;
	}
   .pagination > .active,
	.pagination > .active > a,
	.pagination > .active > span,
	.pagination > .active > a:hover,
	.pagination > .active > span:hover,
	.pagination > .active > a:focus,
	.pagination > .active > span:focus {
	    z-index: 3;
	    color: #fff;
	    cursor: default;
	    background-color: #F97A28;
	    border-color: #F97A28;
	}
	.pagination > .disabled > span,
	.pagination > .disabled > span:hover,
	.pagination > .disabled > span:focus,
	.pagination > .disabled > a,
	.pagination > .disabled > a:hover,
	.pagination > .disabled > a:focus {
	    color: #777;
	    cursor: not-allowed;
	    background-color: #fff;
	    border-color: #ddd;
	}
</style>
<main class="user_page">
    <section class="">
        <div class="layui-main">
            <div class="user_con">
                <div class="user_headpage" >
                    {include file="user_activity/page_menu" menu='user_active_par_list' id="$id" /}
                </div>
                <div class="right_main ">

                    <p class="ft24 mb10 ft-bold">參加名單 - werwe</p>
                    <p class="ft14 gary_c9 mb20 ft-bold"></p>
                    <div class="block_com" style="min-height: 70vh;">
                       <ul class="layui-form layui-row layui-col-space40 ul_height">
                          <li class="layui-col-md6 layui-col-xs12">
                             <div class="item">
                                <div class="layui-form-item">
                                   <div class="layui-input-wrap">
                                      <input type="text" class="layui-input search_form"  value="{$query.keyword|default=''}"  autocomplete="off" placeholder="订单编号、票号、票种、姓名、手机、Email">
                                      <div class="layui-input-suffix search">
                                         <i class="layui-icon layui-icon-search" ></i>
                                      </div>
                                   </div>
                               
                                </div>
                                <div class="layui-form-item">
                                   <div class="d-flex jc-s">
                                      <div class="mr20 flex-1">
                                         <select lay-filter="group_select" lay-search clearable> 
                                                <option value="0">所有分组</option>
                                             {volist name="groups" id="vo"} 
                                                <option {$query.group == $vo.id ? 'selected' : ''} value="{$vo.id}">{$vo.group_name}</option>
                                             {/volist}
                                          
                                         </select>
                                      </div>
                                      <select lay-filter="limit_select">
                                         <option  {$query.limit == 10 ? 'selected' : ''} value="20">每页10</option>
                                         <option  {$query.limit == 20 ? 'selected' : ''} value="20">每页20</option>
                                         <option  {$query.limit == 50 ? 'selected' : ''} value="50">每页50</option>
                                         <option  {$query.limit == 100 ? 'selected' : ''} value="100">每页100</option>
                                      </select>
                                   </div>
                                </div>
                             </div>
                          </li>
                          <li class="layui-col-md6 layui-col-xs12">
                             <div class="item d-flex jc-fe al-fe">
                                <a class="mr10" target="_blank"  href="/activity/user/activity/{$act.id}/user_active_par_list?act=download&status={$query.status ?? ''}&group={$query.group ?? 0}&keyword={$query.keyword ??''}">
                                   <button class="layui-btn layui-bg-orange down ">汇出名单</button>
                                </a>
                                <!-- <button data-dialog="ticket" class=" layui-btn layui-bg-orange ">设定验票通知</button> -->
                             </div>
                          </li>
                       </ul>
                       <p class="gary_c9 ft-bold ft12 mt40 mb12">
                          *為保護消費者個資安全，未完成報名或消費者自行取消訂票，將遮蔽部份個人資訊；若消費者對於訂單有疑慮，可以透過訂購人姓名和信箱與
                       </p>
                       <div class="flex-center mb30">
                          <ul class="ul_height ticket_ul1">
                            {volist name="statusMapping" id="vo"} 
                              <li>
                                 <a class="item {$vo.code == $query.status ? 'layui-this' : ''}" data-status="{$vo.code}" href="/activity/user/activity/20/user_active_par_list?page=1&status={$vo.code}&limit={$query.limit}&group={$query.group ?? 0}&keyword={$query.keyword ?? ''}">{$vo.text}({$vo.count})</a>
                              </li>
                            {/volist}
                          </ul>
                       </div>
                       <div class="ticket_ul2 al_table">
                          <table class="layui-table " lay-skin="nob" >
                                 
                             <thead>
                                <tr>
                                   <!-- <th>票號</th> -->
                                   <th>參加人姓名</th>
                                   <th>參加人Email</th>
                                   <th>參加人電話</th>
                                   <th>價錢</th>
                                   <th>票種</th>
                                   <th>狀態</th>
                                   <th width="200">报名表</th>
                                   <th>建立時間</th>
                                   <th>操作</th>
                                </tr>
                             </thead>
                             <tbody>
                              {if count($orders)}
                                {volist name="orders" id="vo"}
                                 <tr>
                                    <!-- <td>{$vo.sn}</td> -->
                                    <td>{$vo.name}</td>
                                    <td>{$vo.email}</td>
                                    <td>{$vo.phone}</td>
                                    <td>{$vo.price}</td>
                                    <td>{$vo.ticket_name}</td>
                                    <td>{$vo.status_name}</td>
                                    <td>
                                       {if count($vo.diy_data)} 
                                             {volist name="vo.diy_data" id="diy" empty="暂时没有数据" }
                                                {if $key!='name' && $key!='email' && $key !='phone'} 
                                                <p>{$key} : {$diy}</p>
                                                {/if} 
                                             {/volist}
                                       {/if}
                                    </td>
                                    <td>{$vo.create_time}</td>
                                    <td class="a_b1">
                                       {if $vo.status == 3} 
                                          <a data-id="{$vo.id}"  class="verify" >审核</a>
                                       {/if}
                                    </td>
                                 </tr>
                                {/volist} 
                              {/if}
                  
                             </tbody>
                           
                          </table>
                          {$page|raw}
                       </div>
  
                 
                    </div>
                 </div>
            </div>
        </div>
    </section>
</main>
<div class="layui-hide">
    <div class="ticket_dia ">
       <p class="ft-bold ft24 t1">設定驗票通知</p>
       <div class="block">
          <p class="ft14 gary_c9 ft-bold mb20">驗票通知是 ACCUPASS 獨創的強大功能，凡是進場的民眾掃描 ACCUPASS 電子票後，系統會自動顯示特定的訊息在手機或</p>
          <form class="layui-form" onsubmit="return false" lay-filter="demo-val-filter">
             <div class="layui-form-item">
                <div class="label ">1、應用範圍</div>
                <div class="">
                   <select>
                      <option>所有票券</option>
                   </select>
                </div>
             </div>
             <div class="layui-form-item">
                <div class="label ">2、序號</div>
                <div class="d-flex al-c flex-wrap">
                   <p class="mr20">起始</p>
                   <div class="label_pl">
                      <div class="item">所有票券</div>
                   </div>
                </div>
             </div>
             <div class="layui-form-item">
                <div class="label ">3、顯示模板</div>
                <div class="d-flex">
                   <input name="name1" class="layui-input" placeholder="自定文字" style="width: 1.5rem;">
                   <input name="name2" class="layui-input flex-1 ml10 mr10" placeholder="我的票券">
                   <button data-btn="add_pl" class="layui-btn layui-btn-primary layui-border-orange layui-btn-lg"><i
                         class="layui-icon  layui-icon-add-circle-fine mr5"></i>新增</button>
                </div>
             </div>
             <div class="layui-form-item">
                <div class="label ">示範:</div>
                <div class="add_pl_block">

                </div>
             </div>
          </form>

       </div>
       <div class="b2">
          <button class="layui-btn layui-btn-primary layui-border" data-close>取消</button>
          <button class="layui-btn layui-btn-primary layui-border-orange" data-close>设定</button>
       </div>
    </div>
 </div>
 <script>


$(document).ready(function() {
    // 选择所有具有 'active' 类的元素
    var $activeElements = $('.active');

    // 移除所有元素的 'active' 类
    $activeElements.removeClass('active');

    // 为最后一个元素添加 'active' 类
    $activeElements.last().addClass('active');
});

// 使用 jQuery 选择按钮元素
const button = $('.down');

// 为按钮添加点击事件监听器
button.on('click', function() {
    // 改变按钮的文字内容
    $(this).text('下载中');

    // 禁用按钮以防止二次点击
    $(this).prop('disabled', true);

    $(this).css('background-color', 'gray');

    // 你可以根据需要添加其他代码
});

// 为按钮添加点击事件监听器
// button.addEventListener('click', function() {
//     // 改变按钮的文字内容
//     button.textContent = '下载中';

//     // 禁用按钮以防止二次点击
//     button.disabled = true;

//     // 你可以根据需要添加其他代码
// });
    var addhtml = $('.ticket_dia')[0].outerHTML;
    $(document).on('click', '[data-dialog="ticket"]', function () {
       layui.use(function () {
          var upload = layui.upload;
          var layer = layui.layer;
          var element = layui.element;
          var $ = layui.$;
          var form = layui.form;
 
          layer.open({
             type: 1, // page 层类型
             area: ['900px', '65%'],
             title: false,
             shade: 0.6, // 遮罩透明度
             closeBtn: 0,
             shadeClose: true, // 点击遮罩区域，关闭弹层
             anim: 0, // 0-6 的动画形式，-1 不开启
             content: addhtml,
             success: function () {
                // 对弹层中的表单进行初始化渲染
                form.render();
                // 表单提交事件
                form.on('submit(demo-login)', function (data) {
                   var field = data.field; // 获取表单字段值
                   // 显示填写结果，仅作演示用
                   layer.alert(JSON.stringify(field), {
                      title: '当前填写的字段值'
                   });
                   // 此处可执行 Ajax 等操作
                   return false; // 阻止默认 form 跳转
                });
             }
          });
          var form = layui.form;
       })
 
    })

   
    layui.form.on('select(group_select)', function(data){
      const status = '{$query.status ?? 3}'; 
      const limit  = '{$query.limit ?? 20}'; 
      const keyword  = '{$query.keyword ?? ""}'; 
      // 构建新的 URL，将 group 参数和查询字符串拼接在一起
      const newUrl = `/activity/user/activity/{$id}/user_active_par_list?page=1&limit=20&group=${data.value}&status=${status}&keyword=${keyword}`;

         // 重定向到新的 URL
         location.href = newUrl;
      });


         
    layui.form.on('select(limit_select)', function(data){
         const status = '{$query.status ?? 3}'; 
         const group  = '{$query.group ?? 0}'; 
         const keyword  = '{$query.keyword ?? ""}'; 
         // 构建新的 URL，将 group 参数和查询字符串拼接在一起
         const newUrl = `/activity/user/activity/{$id}/user_active_par_list?page=1&limit=${data.value}&group=${group}&status=${status}&keyword=${keyword}`;
         
         // 重定向到新的 URL
         location.href = newUrl;
      });

 

$(document).ready(function() {
   const $inputField = $('.search_form');
    // 定义一个搜索函数
    function search() {
       
        // 获取用户输入的搜索关键词
        const keyword = $('.search_form').val().trim();
        const status = '{$query.status ?? 3}'; 
        const group  = '{$query.group ?? 0}'; 
        const limit  = '{$query.limit ?? 20}'; 
        // 如果搜索关键词不为空
        if (keyword !== '') {
            // 构建搜索请求的 URL
            const newUrl = `/activity/user/activity/{$id}/user_active_par_list?page=1&limit=${limit}&group=${group}&status=${status}&keyword=${keyword}`;
         
         // 重定向到新的 URL
         location.href = newUrl;
        }
    }

    // 监听输入框的 blur 事件
    $inputField.on('blur', function() {
        // 在输入框失去焦点时调用搜索函数
        search();
    });
});
    $(document).on('click', '[data-close]', function () {
       layer.closeAll()
    }).on('click', '[data-btn="add_pl"]', function () {
 
       // 表单取值
       layui.use(function () {
          var form = layui.form;
          var data = form.val('demo-val-filter');
          if (data.name1 == '' && data.name2 == '') {
             return
          }
          $('<div class="item1">' + data.name1 + ' ' + data.name2 + '<div data-btn="clear">清除</div></div>').appendTo($(document).find('.add_pl_block'))
          form.val('demo-val-filter', {
             name1: '',
             name2: ''
          })
       })
 
    }).on('click', '[data-btn="clear"]', function () {
       $(this).closest('.item1').removeClass()
    })
    $(document).on('click','.search',function(){
        const search = $('.search_form').val();
        console.log(search)
    })

    $(document).on('click', '.verify', function () {
         var id = $(this).data('id');
         // 弹出确认框
         layer.confirm('是否通过审核?', {
            btn: ['通过', '拒绝'], // 两个按钮
            title: false
         }, function (index) {
            // 点击通过按钮
            $.quickPost('/activity/user/activity/{$act.id}/user_active_par_list', { status: 4,id:id }).done((res) => {
                  // 审核通过后的操作，例如刷新页面
                  location.reload();
            });
            layer.close(index);
         }, function (index) {
            // 点击拒绝按钮
            $.quickPost('/activity/user/activity/{$act.id}/user_active_par_list', { status: 6 ,order_id:id}).done((res) => {
                  // 审核拒绝后的操作，例如刷新页面
                  location.reload();
            });
            layer.close(index);
         });
      });
 </script>

{/block}